<template>
  <div class="container">
    <div class="box" :class="classList">
      <!-- login -->
      <div class="login">
        <el-form
          ref="loginForm"
          :label-position="labelPosition"
          label-width="65px"
          :model="loginUser"
          class="demo-dynamic"
          :rules="formRlues"
        >
          <el-form-item>
            <div class="title">欢迎登录</div>
          </el-form-item>
          <el-form-item label="账号" prop="phone">
            <el-input
              v-model="loginUser.phone"
              autocomplete="off"
              clearable
              placeholder="请输入账号"
              suffix-icon="el-icon-s-promotion"
              maxlength="11"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="loginUser.password"
              clearable
              type="password"
              placeholder="请输入密码"
              maxlength="11"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
              <el-col :span="10">
                  <el-input
                          v-model="loginUser.code"
                          placeholder="请输入验证码"
                          maxlength="4"
                  ></el-input>
              </el-col>
              <el-col :span="10">
                  <div class="captcha" style="margin-left: 20px">
                      <img id="captcha" src="http://127.0.0.1:8088/captcha" @click="refresh()">
                  </div>
              </el-col>
          </el-form-item>

          <el-form-item>
            <el-button type="warning" round @click="submit()"
              >立即登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 注册 -->
      <div class="register">
        <el-form
          ref="registerForm"
          :model="registerUser"
          class="demo-dynamic"
          :rules="formRlues"
        >
          <el-form-item>
            <div class="title">欢迎注册</div>
          </el-form-item>
          <el-form-item label="账号" prop="phone">
            <el-input
              v-model="registerUser.phone"
              clearable
              placeholder="请输入账号"
              suffix-icon="el-icon-s-promotion"
              maxlength="11"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="registerUser.email"
              clearable
              suffix-icon="el-icon-chat-round"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password" clearable>
            <el-input
              v-model="registerUser.password"
              type="password"
              suffix-icon="el-icon-edit"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="warning" round @click="login()"
              >立即注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 叠层部分 -->
      <div class="container-overlay">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <el-button type="warning" plain @click="loginChange"
              >已有账号，直接登录</el-button
            >
          </div>
          <div class="overlay-panel overlay-right">
            <el-button type="warning" plain @click="registerChange"
              >没有账号点击注册</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive, onMounted, ref} from "vue";
import router from "../router/index.js";
import { ElMessage } from "element-plus";
import {login} from "@/utils/request";
import {setToken} from "@/utils/token";

export default {
  name: "LoginRegister",
  setup() {
    //类
    let classList = reactive([]);
    // const loginForm = ref("loginForm");
    let loginUser = reactive({
      phone: "",
      password: "",
      code:""
    });
    let registerUser = reactive({
      phone: "",
      email: "",
      password: "",
    });
    let labelPosition="left";
    let refresh=()=>{
        document.getElementById("captcha").src="http://127.0.0.1:8088/captcha?"+new Date().getTime();
    }
    const loginForm=ref();
    // 登录请求
    let submit = () => {
        loginForm.value.validate((valid)=>{
            if (valid) {
                login(loginUser)
                    .then((res) => {
                        console.log(res);
                        setToken(res.data.map.token);
                            router.push("/Home");
                            ElMessage({
                                message: `${res.data.msg}`,
                                type: "success",
                            });
                    })
                    .catch((err) => {
                        console.log(err);
                        ElMessage({
                            message: `${err.message}`,
                            type: "error",
                        });
                        loginForm.value.resetFields();
                        return false
                    });

            }else {
                ElMessage({
                    message: "输入格式错误",
                    type: "error",
                });
                loginForm.value.resetFields();
              return false;
            }
        })
    };
    let loginChange = () => {

      classList.pop("panel-active");
    };
    let registerChange = () => {
      classList.push("panel-active");
    };
    const formRlues = reactive({
      phone: [
        {
          required: true,
          message: "账号不得为空",
          trigger: "blur",
        },
        {
          min: 5,
          max: 30,
          message: "账号长度必须在5个字符以上",
          trigger: "blur",
        },
      ],
      code:[
          {
              required: true,
              message: "验证码不得为空",
              trigger: "blur",
          }
      ],
      email: [
        {
          required: true,
          type: "email",
          message: "email格式错误",
          trigger: "blur",
        },
      ],
      password: [
        { required: true, message: "密码不得为空", trigger: "blur" },
        {
          min: 6,
          max: 30,
          message: "密码长度必须在6到30之间",
          trigger: "blur",
        },
      ],
    });
    onMounted(() => {
            classList.push("page_loaded");
        })
    return {
      submit,
      labelPosition,
      loginUser,
      classList,
      registerUser,
      refresh,
      loginChange,
      registerChange,
      loginForm,
      formRlues,
    };
  },

};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  background: url("../assets/login_bg.jpg") fixed no-repeat;
  background-size: cover;
}
.box {
  width: 60%;
  height: 22rem;
  text-align: center;
  display: flex;
  align-items: center;
  border-radius: 19px;
  background: #ffffff;
  position: relative;
}
.page_loaded{
  transition: 1s ease-in;
  animation: page_loaded 1s ease-in;
  animation-fill-mode:both;
  box-shadow: 0px 5px  8px #0c0c0c;

}
@keyframes page_loaded {
  0% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(100%);
  }80% {
    transform: translateY(95%);
  }
  100% {
    transform: translateY(100%);
  }
}

.login,
.register {
  width: 50%;
}
.login {
  z-index: 2;
}
.register {
  z-index: 1;
  opacity: 0;
}
.title {
  font-size: 24px;
  font-weight: 700;
}
.el-form {
  text-align: center;
  padding: 10px;
}
/* 层叠部分 */
.container-overlay {
  height: 100%;
  left: 50%;
  border-radius: 19px;
  /* 隐藏掉超出部分的图画 */
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: transform 0.6s ease-in-out;
  width: 50%;
  /* 优先显示级别最高 遮住空白处，使得显示动画 */
  z-index: 100;
}
.overlay {
  /* 父容器的 200% 100%  */
  width: 200%;
  height: 100%;
  /* 的定位设置为相对定位，使得后续的定位属性可以生效。 */
  position: relative;
  /* 左边缘定位到父容器的左边缘外，即向左移动一个父容器的宽度。 */
  left: -100%;
  /* 再次引入背景图 */
  background: url("../assets/login_bg.jpg") no-repeat center fixed;
  background-size: cover;
  transition: transform 0.6s ease-in-out;
  transform: translateX(0);
  /* 将 .overlay 进行水平方向平移，当前设置为 translateX(0) 表示不发生平移。 */
}
.overlay-panel {
  /* 控制按钮有无账号那一部分 */
  /* 与父元素同高则定位居中 */
  height: 100%;
  width: 50%;
  /* 相对于overlay绝对定位 */
  position: absolute;
  /* 弹性盒子水平垂直居中切变换主轴为y轴 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* transform: translateX(0); */
  transition: transform 0.6s ease-in-out;
}
.overlay-left {
  /* 左边部分,已有账号直接登录,x轴平移-20% */
  transform: translateX(-20%);
}

.overlay-right {
  /* 右部分,没有账号按钮 */
  right: -3px;
  transform: translateX(0);
}
/* 重点在这!! 通过添加或移除 panel-active 类，切换面板的状态，触发相应的样式变化，从而实现了页面切换的动画效果。*/
/*这段代码定义了在应用 .panel-active 类时，不同元素的动画效果。通过改变 transform 属性的值，
        可以控制各个元素的水平平移效果，从而实现动画过渡效果，将元素由隐藏状态移动到可见位置。同时，还改变了透明度和堆叠顺序，以控制元素的可见性和显示层级。*/
/* 定义了这样一个动画,并且在后面js部分通过点击实现了左右移动,添加样式达到实现动画的情况 */
/* 与下面js代码结合在一起形成了一个切面效果 当点击 signInBtn 按钮时，执行的函数会移除 container 元素的 panel-active 类，使得切换面板回到原始状态。
        当点击 signUpBtn 按钮时，执行的函数会为 container 元素添加 panel-active 类，触发面板的切换效果。*/
/* 当 container 具有 panel-active 类时，.panel-active .overlay-left 的样式规则将使 .overlay-left 元素在水平方向上不发生平移；
        同样地，.panel-active .container-overlay 规则将使 .container-overlay 元素向左平移它的宽度的 100%；
        .panel-active .overlay 规则将使 .overlay 元素向右平移自身宽度的 50%；
        .panel-active .container-signin 规则将使 .container-signin 元素向右平移自身宽度的 100%；
        .panel-active .container-signup 规则将使 .container-signup 元素向右平移自身宽度的 100%，并设置其不透明度为 1，堆叠顺序为 5。 */
.panel-active .overlay-left {
  transform: translateX(0);
}

.panel-active .container-overlay {
  transform: translateX(-100%);
}

.panel-active .overlay {
  transform: translateX(50%);
}

.panel-active .login {
  opacity: 0;
  transform: translateX(100%);
}

.panel-active .register {
  opacity: 1;
  z-index: 5;
}
</style>
